<template>
    <div class="user">
        <el-form size="small" :inline="true" class="demo-form-inline">
            <el-form-item label="资讯类型：">
                <el-select v-model="type" placeholder="请选择">
                    <el-option label="资讯 " :value="0"></el-option>
                    <el-option label="商学院" :value="1"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="getTableList">查询</el-button>
            </el-form-item>
        </el-form>
        <!--添加等级-->
        <div class="common-level-rail">
            <el-button size="small" type="primary" @click="addClick" icon="el-icon-plus">添加</el-button>
        </div>
        <!--内容-->
        <div class="product-content">
            <div class="table-wrap">
                <el-table size="small" :data="tableData" border style="width: 100%" v-loading="loading">
                    <el-table-column prop="id" label="ID" width="300"></el-table-column>
                    <el-table-column prop="title" label="标题"></el-table-column>
                    <el-table-column prop="time" label="创建时间"></el-table-column>
                    <el-table-column fixed="right" label="操作" width="90">
                        <template slot-scope="scope">
                            <el-button @click="editClick(scope.row)" type="text" size="small"
                                v-auth="'/user/tag/edit'">编辑</el-button>
                            <el-button @click="deleteClick(scope.row)" type="text" size="small"
                                v-auth="'/user/tag/delete'">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <!--分页-->
            <div class="pagination">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
                    :current-page="curPage" :page-size="pageSize" layout="total, prev, pager, next, jumper"
                    :total="totalDataNumber">
                </el-pagination>
            </div>
        </div>

        <!--添加-->
        <Add v-if="open_add" :open_add="open_add" @closeDialog="closeDialogFunc($event, 'add')"></Add>

        <!--编辑-->
        <Edit v-if="open_edit" :open_edit="open_edit" :form="userModel" @closeDialog="closeDialogFunc($event, 'edit')">
        </Edit>
    </div>
</template>

<script>
import NewsApi from '@/api/news.js';
import Edit from './edit.vue';
import Add from './add.vue';
import {deepClone} from '@/utils/base.js';
export default {
    components: {
        /*编辑组件*/
        Edit,
        Add
    },
    data() {
        return {
            /*是否加载完成*/
            loading: true,
            /*列表数据*/
            tableData: [],
            /*一页多少条*/
            pageSize: 20,

            type: 0,
            /*一共多少条数据*/
            totalDataNumber: 0,
            /*当前是第几页*/
            curPage: 1,
            /*是否打开添加弹窗*/
            open_add: false,
            /*是否打开编辑弹窗*/
            open_edit: false,
            /*当前编辑的对象*/
            userModel: {}
        };
    },
    created() {
        /*获取列表*/
        this.getTableList();
    },
    methods: {
        /*选择第几页*/
        handleCurrentChange(val) {
            let self = this;
            self.curPage = val;
            self.loading = true;
            self.getTableList();
        },

        /*每页多少条*/
        handleSizeChange(val) {
            this.curPage = 1;
            this.pageSize = val;
            this.getTableList();
        },

        /*获取列表*/
        getTableList() {
            let self = this;
            let Params = {};
            Params.page = self.curPage;
            Params.list_rows = self.pageSize;
            Params.type = self.type;
            NewsApi.getList(Params, true)
                .then(data => {
                    self.loading = false;
                    self.tableData = data.data.data;
                    self.totalDataNumber = data.data.total
                })
                .catch(error => {

                });
        },

        /*打开添加*/
        addClick() {
            this.open_add = true;
        },

        /*打开编辑*/
        editClick(item) {
            this.userModel = deepClone(item);
            this.open_edit = true;
        },

        /*关闭弹窗*/
        closeDialogFunc(e, f) {
            if (f == 'add') {
                this.open_add = e.openDialog;
                if (e.type == 'success') {
                    this.getTableList();
                }
            }
            if (f == 'edit') {
                this.open_edit = e.openDialog;
                if (e.type == 'success') {
                    this.getTableList();
                }
            }
        },
        /*删除用户*/
        deleteClick(row) {
            let self = this;
            self.$confirm('此操作将永久删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                self.loading = true;
                NewsApi.del_item({
                    id: row.id
                }, true)
                    .then(data => {
                        self.loading = false;
                        if (data.code == 1) {
                            self.$message({
                                message: data.msg,
                                type: 'success'
                            });
                            self.getTableList();
                        }
                    })
                    .catch(error => {
                        self.loading = false;
                    });

            }).catch(() => {

            });
        }

    }
};
</script>

<style></style>